<template>
 <div class="title">
<!-- 版心 -->
<el-container>
 <div>
  <img src="/src/components/img/city_106-wallpaper-1920x1080.jpg" alt="">
 </div>
  <el-main>
<div class="fang">
<i class="el-icon-s-home" ></i>
 <span>房产经纪</span>
</div>
<el-row :gutter="20">
  <el-col class="minbox" :span="8"  v-for="item in list" :key="item.id" >
  <el-card  :body-style="{padding: '0px' }">
      <img class="imgdd" :src="item.image">
      <div style="padding: 14px;">
        <span><h4 class="titlename">{{item.name}}</h4></span>
        <div class="bottom clearfix">
          <time class="time">{{ item.desc }}</time>
        </div>
      </div>
    </el-card>
  </el-col>
</el-row>

  </el-main>

</el-container>

 <!-- <div>
  <h1 class="el-icon-s-promotion">房产经纪</h1>
 </div> -->


 </div>

</template>

<script>
import {getAgetList} from '@/api/agets'
export default {
data() {
       return {
       list:[]
    };
    },
    created () {
       this.getAgetList()
    },
    methods: {
      async  getAgetList(){
    const res =await getAgetList()
   
    this.list=res.data
     console.log(this.list);
      }
    }
}
</script>

<style>
 .el-main[data-v-13877386]{
  /* background-image: url('/src/components/img/city_106-wallpaper-1920x1080.jpg'); */
  background-color: #fff;
overflow-x: hidden;
margin-top: 20px;
 /* background-image: linear-gradient(to right top, #6b89d1, #828ad7, #9a8adc, #b289dd, #c988dc, #df85d1, #f184c4, #ff84b5, #ff8a9b, #ff9881, #ffaa6c, #fbbe5f); */
}
.el-footer, .el-main{
  padding: 0 20px;
}

.minbox{
  height: 300px;
  justify-content: space-between;
  margin:0 auto;
   background-color: #fff;
   margin-bottom: 20px;
   /* background-image:url('/src/components/img/city_106-wallpaper-1920x1080.jpg'); */
   /* background-image: linear-gradient(to right top, #6b89d1, #828ad7, #9a8adc, #b289dd, #c988dc, #df85d1, #f184c4, #ff84b5, #ff8a9b, #ff9881, #ffaa6c, #fbbe5f);
    */
}
.time {
    font-size: 14px;
    color: #000;
    
  }
.el-card__body{

background-image: linear-gradient(to bottom, #3ac5ff, #69d0f2, #92d9e8, #b8e0e3, #dbe6e5);
}
  .button {
    padding: 0;
    float: right;
  }

  .image {

    width: 200px;
    display: block;
  }
 .imgdd{

  border-radius: 50%;
   margin-top: 20px;
  width: 200px;
  height:200px ;
 }
  .clearfix:before,
  .clearfix:after {
      display: table;
      content: "";
  }
.titlename{
  display: inline;
}
  .clearfix:after {
      clear: both
  }
  .fang{
  text-align: center;
  font-size: 24px;
    margin-bottom: 20px;
  }
</style>